<template>
  <div class="searchInfo">
    <!-- 搜索框 -->
    <div class="search">
      <van-cell-group inset>
        <van-icon name="arrow-left" class="backIco" size="6vw" @click="back" />
        <van-field
          @click="toSearch"
          center
          left-icon="search"
          clearable
          placeholder="搜索商品"
        >
          <template #button>
            <van-button size="small" style="{color: #000;}" >搜索</van-button>
          </template>
        </van-field>
        <van-icon name="weapp-nav" />
      </van-cell-group>
    </div>
    <div class="top">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
      </van-dropdown-menu>
    </div>
      <!-- 搜索商品 -->
      <div class="hotShop">
        <ul class="hotList">
          <li v-for="item in searchList" :key="item.id" @click="checkShop(item)">
            <img :src="item.s_goods_photos[0].path" alt="">
            <h3>{{ item.name }}</h3>
            <span>￥{{ item.price }}</span>
          </li>
          <li style="background-color: transparent;"></li>
        </ul>
      </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router=useRouter()

const value1 = ref(0);
const value2 = ref('a');
const option1 = [
  { text: '全部商品', value: 0 },
  { text: '新款商品', value: 1 },
  { text: '活动商品', value: 2 },
];
const option2 = [
  { text: '默认排序', value: 'a' },
  { text: '好评排序', value: 'b' },
  { text: '销量排序', value: 'c' },
];
// 获取搜索商品列表
const searchList=JSON.parse(localStorage.getItem('searchList'))
// 返回上一级
const back=()=>{
  router.back()
}
// 去搜索
const toSearch=()=>{
  router.push('/Search')
}
// 商品详情
const checkShop=(item)=>{
  localStorage.setItem('good',JSON.stringify(item))
  router.push('/ProductInfo')
}
</script>

<style lang='scss' scoped>
.searchInfo{
  width: 100vw;
  box-sizing: border-box;
  width: 100vw;
  padding-top: 2.6667vw;
  .search{
    height: 13.3333vw;
    border-bottom: 1px solid #f4f4f8;
    background-color: #fff;
    .van-cell-group{
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin: 0;
      .backIco{
        margin-right: 2vw;
      }
      .van-cell{
        width: 80vw;
        background-color: #f4f4f8;
        padding: 1vw 1vw 1vw 2vw;
        .van-button{
          background-color: #f4f4f8;
          border: none;
        }
      }
    }
  }
  .hotShop{
      .hotList{
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        width: 96vw;
        // height: 266.6667vw;
        padding-bottom: 13.3333vw;
        box-sizing: border-box;
        li{
          margin-top: 1.3333vw;
          width: 42.6667vw;
          height: 56vw;
          background-color: #f2f2f2;
          border-radius: 2.6667vw;
          img{
            width: 42.6667vw;
            height: 42.6667vw;
            border-radius: 2.6667vw;
          }
          h3{
            height: 5.3333vw;
            line-height: 5.3333vw;
            font-size: 4.2667vw;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #000;
          }
        }
      }
    }
}
</style>
